<template>
  <div class="coursecontainer">
    <div class="slot">
      <slot></slot>
    </div>
    <div class="coursebox">
      <div 
        v-for="item in courseList" 
        :key="item.courseId" 
        class="course"
        @click="goToDetail(item.courseId)"  
      >
        <img :src="item.bannerFileUrlPc" alt="">
        <div class="courseTitle"> {{ item.courseTitle }}</div>
        <div class="learningNum">共{{ item.subSectionNum }}节课|{{ item.learningNum }}人报名</div>
        <div id="isFree">
          <span v-if="item.isFree == 1">免费</span>
          <span v-else-if="item.isDiscount == 1 && item.isFree == 0">
            <span class='red'>￥{{ item.discountPrice }}</span> <del>￥{{ item.coursePrice }}</del>
          </span>
          <span v-else>
            <span class='red'>￥{{ item.coursePrice }}</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/request.js";
export default {
  name: 'CourseView',
  props: {
    type: {
      type: String,
      default: 'free'
    },
    pageSize: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      courseList: []
    };
  },
  created() {
    getList(this.type, this.pageSize).then((res) => {
      console.log(res.data);
      this.courseList = res.rows;
    });
  },
  methods: {
    goToDetail(courseId) {
      const url = this.$router.resolve({
        path: `/detail/${courseId}`,
        query: {
          id: courseId
        }
      });
      window.open(url.href, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>
.coursecontainer{
    width: 1160px;
    background-color: #fff; 
    margin: 20px auto;
    border-radius: 15px;
    .slot{
    margin:  auto;
    width: 1000px;
    height: 30px;
     h3{
        line-height:50px;
     }
  
  }
}
.coursebox{
        width: 1160px;
        height: 250px;
        margin: 10px auto;
        display: flex;
        justify-content: space-between; 
        background-color: #fff;   
       
}

.course {
  width: 215px;
  height: 200px;
  margin: 10px auto ;
}
.course img {
  width: 215px;
  height: 118px;
}
.courseTitle {
    color: #000;
    font-size: 15px;
    margin: 10px ;
    overflow: hidden;
     text-overflow: ellipsis;
    white-space: nowrap;
    width: 210px;
    height: 20px;
}
.learningNum {
    font-size: 13px;
    color: gray;
    margin: 10px;
}
#isFree {
    font-size: 16px;
    color: green;
     font-weight: bold;
     margin: 10px ;
     del {
       font-size: 13px;
       color: gray;
     }
 }
   .red {
     color: red;
     }
 
</style>